<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2022-03-19 09:02:56
 * @LastEditTime: 2022-03-19 09:18:05
 * @FilePath: \WebSkillExtend\eg11-css-width设置\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS宽度设置</title>
    <style>
      .app {
        width: 300px;
        border: 1px solid green;
      }
      .border {
        border: 1px solid red;
        margin: 20px 0;
      }
      .auto {
        width: auto;
      }
      .min {
        width: min-content;
      }
      .max {
        width: max-content;
      }
      .fit {
        width: fit-content;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <div class="border auto">
        由中央网信办主办的“踔厉奋发新时代
        笃行不怠向未来”2022年网上重大主题宣传启动，内容包括“人民至上”“非凡十年”等五个篇章145个项目，其间将推出一系列鲜活生动接地气、昂扬向上有朝气的精品佳作，凝聚起亿万网民奋进新征程、建功新时代的强大精神力量
      </div>
      <div class="border auto">auto自动和父级一样宽</div>
      <div class="border min">由中央网信办主办的</div>
      <div class="border min">width:min-content是很好用的</div>
      <div class="border min">minContent是很好用的</div>
      <div class="border max">width: max-content</div>
      <div class="border max">
        width: max-contentwidth: max-contentwidth: max-content
      </div>
      <div class="border fit">width: fit-content</div>
      <div class="border fit">
        width: fit-contentwidth: fit-contentwidth: fit-content
      </div>
      <div class="border fit">
        由中央网信办主办的"踔厉奋发新时代"由中央网信办主办的“踔厉奋发新时代
      </div>
    </div>
  </body>
</html>
